<script setup lang="ts">
import type { VxeGridProps } from 'vxe-table'

import { Search } from '@element-plus/icons-vue'
import { useDeleteProductBrand, useGetProductBrandList } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { useMessage } from '@fl/hooks/web/use-message'
import { treeFindLabel } from '@fl/utils/tree'

import AddOrEdit from './add-or-edit.vue'
import { AUTH_STATUS } from './constant'
import Detail from './detail.vue'

const { createConfirmModal } = useMessage()

const showAddOrEdit = ref<boolean>(false)
const showDetail = ref<boolean>(false)
const addOrEditId = ref<string>('')
const detailId = ref<string>('')

const inputBrandName = ref<string>('')
const searchText = ref<string>('')
const getProductBrandListParams = computed(() => ({
    brandName: searchText.value,
}))

const { data: productBrandListData, isLoading: isGetProductBrandListLoading } = useGetProductBrandList(getProductBrandListParams)
const { isPending: isDeleteProductBrandPending, mutate: deleteProductBrand } = useDeleteProductBrand()

// #region Table
const isTableLoading = computed(() => isGetProductBrandListLoading.value)

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'brandLogo', slots: { default: 'brand_logo_slot' }, title: '品牌图片', width: 300 },
        { field: 'brandName', title: '品牌名称' },
        { field: 'brandStatus', formatter: formatBrandStatus, title: '状态' },
        { field: 'brandEnglishName', title: '英文名称' },
        { field: 'brandPinyin', title: '名称拼音' },
        { field: 'createTime', title: '创建时间', width: 170 },
        { field: 'updateTime', title: '更新时间', width: 170 },
        { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 170 },
    ],
    height: undefined,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

function formatBrandStatus({ cellValue }) {
    return treeFindLabel({ targetValue: cellValue, treeData: AUTH_STATUS })
}
// #endregion

// #region UI Listener
function onSearchBtnClick() {
    searchText.value = inputBrandName.value
}

function onAddBtnClick() {
    addOrEditId.value = ''
    showAddOrEdit.value = true
}

function onCheckDetailBtnClick(row: any) {
    detailId.value = row.id
    showDetail.value = true
}

function onEditBtnClick(row: any) {
    addOrEditId.value = row.id
    showAddOrEdit.value = true
}

function onDeleteBtnClick(row: any) {
    createConfirmModal({
        content: '一旦删除不可恢复',
        onSuccess: () => {
            deleteProductBrand(row.id, {
                onSuccess() {
                    ElMessage.success('操作成功')
                },
            })
        },
        title: '要删除吗?',
    })
}
// #endregion
</script>

<template>
    <el-card shadow="never">
        <SearchTable v-bind="gridOptions"
                     :loading="isTableLoading"
                     row-class-name="table-row-style"
                     :data="productBrandListData"
                     :row-style="{ height: '100px' }"
        >
            <template #toolbar_buttons>
                <div class="mb-12 flex w-full justify-between">
                    <div>
                        <el-button type="primary"
                                   @click="onAddBtnClick"
                        >
                            <div class="i-ic:baseline-add size-16" />
                            新增品牌
                        </el-button>
                    </div>

                    <el-input v-model="inputBrandName"
                              class="!w-300"
                              placeholder="请输入品牌名称进行搜索"
                    >
                        <template #append>
                            <SubmitBtn :icon="Search"
                                       style="background: #da0004; color:#fff"
                                       class="w-40 !pl-12"
                                       @click="onSearchBtnClick"
                            />
                        </template>
                    </el-input>
                </div>
            </template>

            <template #brand_logo_slot="{ row }">
                <el-image class="h-100"
                          :src="row.brandLogo"
                          fit="contain"
                          :preview-src-list="[row.brandLogo]"
                />
            </template>

            <template #operate="{ row }">
                <el-button type="primary"
                           text
                           class="!p-4"
                           @click="onCheckDetailBtnClick(row)"
                >
                    查看
                </el-button>

                <el-button text
                           type="primary"
                           class="!p-4"
                           @click="onEditBtnClick(row)"
                >
                    编辑
                </el-button>

                <el-button type="warning"
                           text
                           class="!p-4"
                           :loading="isDeleteProductBrandPending"
                           @click="onDeleteBtnClick(row)"
                >
                    删除
                </el-button>
            </template>
        </SearchTable>
    </el-card>

    <AddOrEdit :key="addOrEditId"
               v-model:id="addOrEditId"
               v-model:visible="showAddOrEdit"
    />

    <Detail :key="detailId"
            v-model:id="detailId"
            v-model:visible="showDetail"
    />
</template>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
    width: 40px;
    padding: 0;
}

:deep(.vxe-cell) {
    max-height: 80px !important;
}
</style>
